<template>
    <div class="courseManage">
      <el-card>
        <!-- <statisticsTag :data="optionsData" @searchStatus="searchStatus"/> -->
        <div class="search_wrap">
            <el-input placeholder="班级名称" v-model="className" clearable style="width: 260px;" @keyup.enter.native="queryListData">
                <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
            <el-date-picker
                v-model="queryDate"
                @change="queryListData"
                type="daterange"
                range-separator="~"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
            </el-date-picker>
        </div>
        <div class="table_list">
            <el-table
                :data="tableListData"
                min-height="500"
                border
                v-loading="loading"
                style="width: 100%">
                <el-table-column type="index" align="center" width="40"/>
                <el-table-column
                    v-for="(item,index) in tableCaption"
                    :key="index"
                    :label="item.label"
                    align="center">
                    <template slot-scope="scope">
                        <span v-if="item.value != 'status' ">{{scope.row[item.value]}}</span>
                        <el-switch
                            v-else
                            v-model="scope.row.status"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            disabled
                            @click.native="changeStatus(scope.row.id)">
                        </el-switch>
                    </template>
                </el-table-column>

                <el-table-column label="操作" align="center"  width="94">
                    <template slot-scope="scope">
                      <el-button type="text"  size="small" circle  @click="goToURL('./edit', scope.row.id)">编辑</el-button>
            　　　　</template>
                </el-table-column>
            </el-table>
            <link-pagination :total="total" :currentPage="currentPage" :limit="limit" v-if="total != 0" @pagination="getPaginationParams"></link-pagination>
        </div>
      </el-card>
    </div>
</template>

<script>
import http from '@/api/classlist'
import { paginationMixin } from '@/mixin'
import {formatDate} from '@/utils'
export default {
  name: 'courseManage',
  mixins: [ paginationMixin ],
  data () {
    return {
      http: http,
      className: null,
      queryDate: null,
      tableListData: [],
      tableCaption: [
        {
          label: '课程级别',
          value: 'name'
        },
        {
          label: '负责人',
          value: 'teacher'
        },
        {
          label: '创建时间',
          value: 'create_time'
        }
      ],
      total: null,
      currentPage: 1,
      loading: false
    }
  },
  methods: {
    getListData(page=this.currentPage,list_rows=this.limit,search=this.className) {
      let params = {
        page,
        list_rows,
        search
      }
      if(this.queryDate){
          params['create_time_start'] = formatDate.toStr(new Date(this.queryDate[0]),'YYYY-MM-DD');
          params['create_time_end'] = formatDate.toStr(new Date(this.queryDate[1]),'YYYY-MM-DD');
      }
    http.getList(params).then(res => {
      this.tableListData = res.data.data
      this.total = res.data.total;
    })
    },
    queryListData () {
      this.getListData()
    },
    goToURL(route, id){
        this.$router.push({path: route, query: {id: id}});
    }
  },
  mounted () {
    this.getListData()
  }
}
</script>

<style lang="scss" scoped>
  @import '@/assets/style/listPage.scss';

.courseManage{
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    overflow: auto;
    &::-webkit-scrollbar {
        width: 6px;
        height: 6px;
        cursor: pointer;
        background: #f1f1f1;
    }
    &::-moz-scrollbar {
        display: none;
    }
    &::-ms-scrollbar {
        display: none;
    }
    &::-o-scrollbar {
        display: none;
    }
    &::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        border-radius: 10px;
        width: 10px;
        cursor: pointer;
        background: #bbb;
    }
    &::-webkit-scrollbar-track {/*滚动条里面轨道*/
        border-radius: 0px;
        background: #f1f1f1;
    }
    .flag{
        padding: 0px 5px;
        background: #C6C7C9;
        min-width: 90px;
        color: #FFF;
        border-radius: 14px;
    }
}
</style>